<template lang="html">
  <article>
    <hot />
    <top-ten />
    <list />
    <industry />
    <recommendation />
    <investment />
    <new-brand />

    <!-- <Slider :items="items" :cname="$style.slider" />
    <Slider :options="options" :items="items" cname="product-slider" />
    <el-row :gutter="gutter">
      <el-col v-for="item in items" :key="item.href" :span="col"><img :src="item.src" alt=""></el-col>
    </el-row>
    <el-button @click="change">123</el-button>
    <el-button @click="change2">333</el-button> -->

  </article>
</template>

<script>
// import Slider from '../../components/template-item1/slider'
import hot from './hot'
import newBrand from './newBrand'
import topTen from './topTen'
import list from './list'
import industry from './industry'
import investment from './investment'
import recommendation from './recommendation'

export default {
  components: {
    // Slider,
    hot,
    newBrand,
    topTen,
    list,
    industry,
    investment,
    recommendation
  },
  data() {
    return {
      col: 12,
      gutter: 20,
      items: [
        {
          href: 'home',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t22900/231/576526218/45107/39fa9788/5b360917N2b51c415.png?width=750&height=320'
        },
        {
          href: 'home1',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t21160/246/1781732558/36338/14ddc2ea/5b36090fN459e431e.jpg?width=750&height=320'
        },
        {
          href: 'home2',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t22987/219/562677820/50700/8c800389/5b360912Nfc5e66c5.jpg?width=750&height=320'
        },
        {
          href: 'home3',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t22900/231/576526218/45107/39fa9788/5b360917N2b51c415.png?width=750&height=320'
        },
        {
          href: 'home11',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t21160/246/1781732558/36338/14ddc2ea/5b36090fN459e431e.jpg?width=750&height=320'
        },
        {
          href: 'home22',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t22987/219/562677820/50700/8c800389/5b360912Nfc5e66c5.jpg?width=750&height=320'
        },
        {
          href: 'home65',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t22900/231/576526218/45107/39fa9788/5b360917N2b51c415.png?width=750&height=320'
        },
        {
          href: 'home164',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t21160/246/1781732558/36338/14ddc2ea/5b36090fN459e431e.jpg?width=750&height=320'
        },
        {
          href: 'home872',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t22987/219/562677820/50700/8c800389/5b360912Nfc5e66c5.jpg?width=750&height=320'
        },
        {
          href: 'home8',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t22900/231/576526218/45107/39fa9788/5b360917N2b51c415.png?width=750&height=320'
        },
        {
          href: 'home41',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t21160/246/1781732558/36338/14ddc2ea/5b36090fN459e431e.jpg?width=750&height=320'
        },
        {
          href: 'home92',
          src:
            '//img12.360buyimg.com/jrpmobile/jfs/t22987/219/562677820/50700/8c800389/5b360912Nfc5e66c5.jpg?width=750&height=320'
        }
      ],
      options: {
        slidesPerView: 3,
        spaceBetween: 30,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  methods: {
    change: function() {
      this.gutter = 50
      this.col = 4
    },
    change2: function() {
      this.gutter = 10
      this.col = 12
    }
  }
}
</script>
<style lang="scss">
.el-row {
  .el-col {
    width: 574px;
    height: 72px;
    overflow: hidden;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style lang="scss" module>
.slider {
  img {
    width: 100%;
  }
}

.product-slider {
  .swiper-container {
    box-sizing: border-box;
    padding: 0 24px;
    .swiper-slide {
      a {
        display: inline-block;
        width: 100%;
        img {
          width: 100%;
          height: 314px;
          display: block;
          border: 1px solid #fafafa;
        }
      }
    }
    .swiper-button-prev {
      display: block !important;
    }

    .swiper-button-next {
      display: block !important;
    }
  }
}
</style>
